<template>
  <div style="background: #f4f4f4;" ref="viewBox" >
    <headNav :isBack="isBack" :isHome="isBack" title="校园缴费"></headNav>
    <div class="headStudentCss" >
      <span style="margin-left: 0.5rem;" >{{information.RealName}}</span>
      <span style="margin-left: 0.2rem; font-size: 15px; " >{{information.GradeName}}{{information.ClassName}}</span>
    </div>
    <div class="bigTitleDiv" >
      <div class="flexCenter titleDiv"  @click="chooseClick(val.id)"
      v-for="(val, index) in classification" :key="index"   >
         <div :class="{borderBottom: choose == val.id}" >{{val.name}}</div>
      </div>
    </div>
    <!-- 待缴费用—————————————————————————————————————— -->
    <!-- recordArr.paymentList -->
    <cost v-if="choose == 1"
    :payArr="recordArr.paymentList"
    :noneRecord="noneRecordCost"
    @costEmit="costEmit"
    @cancel="cancel" ></cost>

    <!-- 缴费记录—————————————————————————————————————— -->
    <record v-if="choose == 2"
    :payArr="yesPaymentArr.paymentList"
    :noneRecord="noneRecordRecord" ></record>

    <div class="noneCss" v-if="none" >
      <span>——————  无更多数据  ——————</span>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import cost from './cost.vue'
import record from './record.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import {getListApi, setRead} from '@/api/payApi'
import { Loading } from 'vux'
export default {
  components: {
    headNav,
    cost,
    record
  },
  data () {
    return {
      isBack: false,
      noneRecordCost: false,   // 判断两个组件是否有数据
      noneRecordRecord: false,
      none: false,  // 无数据加载提示
      choose: 1,  // 切换类别
      information: '',  // 选择学生的信息
      classification: [
        {id: 1, name: '待缴费用'},
        {id: 2, name: '缴费记录'}
      ],
      recordArr: {
        currentPage: 1,  // 当前页
        aFewPage: 5,  // 每页多少条
        allPage: 0,  // 共多少页
        paymentList: []  // 缴费全部记录数组
      },
      yesPaymentArr: {
        currentPage: 1,  // 当前页
        aFewPage: 5,  // 每页多少条
        allPage: 0,  // 共多少页
        paymentList: []  // 已缴费记录数组
      }
    }
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      childList: state => state.user.childList
    })
  },
  async mounted() {
      // 页面滚动事件   ——————————————————————————————————————————————————————————————
      // 通过$refs获取dom元素
      this.box = this.$refs.viewBox
      // 监听这个dom的scroll事件
      this.box.addEventListener('scroll', async () => {
        if (this.$refs.viewBox.scrollTop + this.$refs.viewBox.clientHeight == this.$refs.viewBox.scrollHeight) {
          if (this.choose == 1) {
            if (this.recordArr.currentPage ==  this.recordArr.allPage) {
              this.none = true
            } else {
              this.none = false
              this.recordArr.currentPage = this.recordArr.currentPage + 1
              let resOne = ''
              resOne = await this.getRecords(0, this.recordArr.currentPage, this.recordArr.aFewPage)
              this.recordArr.paymentList = this.recordArr.paymentList.concat(resOne.items)
            }
          } else {
            if (this.yesPaymentArr.currentPage ==  this.yesPaymentArr.allPage) {
              this.none = true
            } else {
              this.none = false
              this.yesPaymentArr.currentPage = this.yesPaymentArr.currentPage + 1
              let valOne = ''
              valOne = await this.getRecords(2, this.yesPaymentArr.currentPage, this.yesPaymentArr.aFewPage)
              this.yesPaymentArr.paymentList = this.yesPaymentArr.paymentList.concat(valOne.items)
            }
          }
        }
        // console.log("距顶部高度 + " + this.$refs.viewBox.scrollTop)
        // console.log("可视高度" + this.$refs.viewBox.clientHeight)
        // console.log("滚动条高度" + this.$refs.viewBox.scrollHeight)

      }, false)


      var search =  location.search  // ?a=1&b=2
      search = search.replace("?", '')  // a=1&b=2
      var arr = search.split("&")  // ["a=1", "b=2"]
      var obj = {}
      for(var item of arr) {
        var list = item.split("=") // ['a', "1"]
        obj[list[0]] = list[1]
      }
      // obj = {a:1, b:2}
      let student = ''
      if (obj.studentId) {
        student = obj.studentId
        this.isBack = false
      } else {
        student = this.studentId
        this.isBack = true
      }
      for (let i of this.childList) {
        if (i.SelfId == student) {
          this.information = i
        }
      }
      this.initializationGet()
  },
  methods: {
    // 支付中断取消触发事件
    async cancel () {
      let res = await this.getRecords(0, 1, this.recordArr.paymentList.length)
      this.recordArr.paymentList = res.items
      let val = await this.getRecords(2, 1, this.yesPaymentArr.paymentList.length)
      this.yesPaymentArr.paymentList = val.items
    },
    // 订单刷新后传过来的事件
    async costEmit () {
      let res = await this.getRecords(0, 1, this.recordArr.paymentList.length)
      this.recordArr.paymentList = res.items
      let val = await this.getRecords(2, 1, this.yesPaymentArr.paymentList.length + 1)
      this.yesPaymentArr.paymentList = val.items
    },
    // 类别切换触发事件
    async chooseClick (e) {
      this.choose = e
      this.none = false
      this.recordArr.currentPage = 1
      this.yesPaymentArr.currentPage = 1
      this.initializationGet()
    },
    // 初始化（更新）获取缴费列表
    async initializationGet () {
      // 待缴费用    ——————————————————————————————————————————
      let res = await this.getRecords(0, this.recordArr.currentPage, this.recordArr.aFewPage)
      this.recordArr.allPage = this.floatToIntegerUp(res.totalCount / this.recordArr.aFewPage)
      this.recordArr.paymentList = res.items
      if (this.recordArr.paymentList.length <= 0) {
        this.noneRecordCost = true
      }

      // 缴费记录    ——————————————————————————————————————————
      let val = await this.getRecords(2, this.yesPaymentArr.currentPage, this.yesPaymentArr.aFewPage)
      this.yesPaymentArr.allPage = this.floatToIntegerUp(val.totalCount / this.yesPaymentArr.aFewPage)
      this.yesPaymentArr.paymentList = val.items
      if (this.yesPaymentArr.paymentList.length <= 0) {
        this.noneRecordRecord = true
      }
    },
    // 获取记录封装方法
    async getRecords (PayState, PageNum, PageSize) {
      let params = {
        GradeId: this.information.GradeId,
        ClassId: this.information.ClassId,
        StudentId: this.information.SelfId,
        PayState: PayState,
        PageNum: PageNum,
        PageSize: PageSize
      }
      if (PayState == 0) {
        this.$set(params, 'FixedOrderBy', true)
      } else {
        this.$set(params, 'Sorting', 'completeTime DESC')
      }
      let res = await getListApi(params)
      // 发送记录已读请求
      let arr = []
      for (let val of res.items) {
        if (!val.read) {
          arr.push(val.id)
        }
      }
      await setRead(arr)
      return res
    },
    // 过滤一共有多少页封装
    floatToIntegerUp (floatNumber) {
      var integerNumber = parseInt(floatNumber)
      if(floatNumber > integerNumber){
          integerNumber += 1;
      }
      return integerNumber;
    },

  }
}
</script>

<style scoped lang="less" >
.noneCss {
  width: 100%;
  display: flex;
  justify-content:center;
  margin-bottom: 0.5rem;
  color: #C2C2C2;
  margin-top: 0.5rem;
}

.noneCss2 {
  width: 100%;
  display: flex;
  justify-content:center;
  margin-top: 1rem;
  font-size: 0.4rem;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.headStudentCss {
  width: 100%;
  height: 0.88rem;
  background: #128fef;
  font-size: 19px;
  color: #fff;
  display: flex;
  align-items: center;
}

.borderBottom {
  color: #128fef;
}

.borderBottom:after {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: 0.88rem;
  bottom: 0;
  right: auto;
  height: 0.06rem;
  width: 0.8rem;
  background-color: #128fef;
}

.bigTitleDiv {
  width: 100%;
  height: 0.92rem;
  display: flex;
  font-size: 0.32rem;
  color: #666;
  background: #fff;
}

.titleDiv {
  width: 50%;
  height: 0.82rem;
  position: relative;
}

</style>
